<template>
	<view>
		<!-- 顶部导航 -->
		<fa-navbar title="学生认证" ref="navbar"></fa-navbar>

		<!-- 如果没有wxid则显示添加图片进行链接 -->

		<view class="cert" v-show="!form.wxid && !student">

			<view class="u-p-30 u-border-bottom">
				<view class="u-m-20 u-font-25 u-text-center"><text>{{title}}</text></view>
				<u-image width="100%" :src="qrcode" mode="widthFix"></u-image>
				<u-button size="default" @click="copyKeyword">复制关键词</u-button>
				<view class="u-m-20 u-font-25 u-text-center"><text>操作流程如下:</text></view>
				<u-image :src="desc" mode="widthFix"></u-image>
			</view>



		</view>
		<!-- 如果是已经认证的进行显示 -->
		<view class="cert">

			<u-image width="100%" :src="qrcode" mode="widthFix"></u-image>

			<!-- 学生认证 -->
			<u-form :model="form" ref="uForm">
				<u-form-item label="学生姓名" prop="name" label-width="150">
					<u-input v-model="form.name" placeholder="请填写你的姓名" :disabled="!is_show"/>
				</u-form-item>
				<u-form-item label="身份证号" prop="idcard" label-width="150">
					<u-input v-model="form.idcard" placeholder="请填写你的身份证号" :disabled="!is_show"/>
				</u-form-item>
			</u-form>

			<u-button @click="submit" v-show="is_show">学生认证</u-button>
			<u-button type="success" v-show="!is_show">已通过认证</u-button>





		</view>




		<!-- 底部导航 -->
		<fa-tabbar></fa-tabbar>
	</view>
</template>

<script>
	export default {
		onLoad: async function(option) {
			// 获取

			let res = await this.$api.getStu();

			console.log(res.data)
			let data = res.data
			this.title = data.title
			this.desc = data.desc
			this.keyword = data.keyword
			this.qrcode = data.qrcode
			let student = data.student
			this.student = student
			this.form.name = student?student.name:''
			this.form.idcard = student?student.idcard:''
			this.is_show = student?false:true

			if (option.wxid) {
				// 设置一下wxid
				this.form.wxid = option.wxid
				this.$u.vuex('vuex_wxid', option.wxid);
			} else {
				this.form.wxid = this.vuex_wxid
			}

		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {

			this.$refs.uForm.setRules(this.rules);
		},
		onShow() {

		},
		data() {
			return {
				student: {},
				title: '',
				desc: '',
				keyword: '',
				qrcode: '',

				is_show: true,

				form: {
					name: '',
					idcard: '',
					wxid: ''
				},
				rules: {
					name: [{
						required: true,
						message: '请输入姓名',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}, {
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {

							return this.$u.test.chinese(value)
						},
						message: '请输入汉字',
						// 触发器可以同时用blur和change
						trigger: ['change', 'blur'],
					}],
					idcard: [{
							required: true,
							message: '请输入身份证号',
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change', 'blur'],
						}, {
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {

								return this.$u.test.idCard(value)
							},
							message: '请输入正确的身份证号',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}



					]
				}


			};
		},
		methods: {
			copyKeyword() {
				let that = this
				uni.setClipboardData({
					data: that.keyword,
					success: function() {
						that.$u.toast('复制成功！');
						return;
					}
				});
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {

						this.$api.postStu(this.form).then(res => {
							console.log(res);
							if (!res.code) {
								this.$u.toast(res.msg);
								return;
							}

							if (res.code == 1) {
								// 认证成功 370911199604295616
								this.is_show = false
								this.$u.toast(res.msg);
								
								// return;

							}

						});

						console.log('验证通过');
					} else {
						console.log('验证失败');
					}
				});
			}
		}

	};
</script>

<style lang="scss">
	page {
		background-color: #ffffff;
	}

	.cert {
		padding: 30rpx;
	}
</style>